import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import React from 'react';
import Home from './pages/home';
import Category from './pages/category';
import Game from './pages/game';
import Bookshelf from './pages/bookshelf';
import Login from './pages/login';
import {observer} from 'mobx-react-lite';
import {ObserverText} from './components';
import {useUserInfoStore} from './mobx';
import {
  SvgHome,
  SvgHomeAct,
  SvgClassify,
  SvgClassifyAct,
  SvgGame,
  SvgGameAct,
  SvgShelf,
  SvgShelfAct,
  SvgMine,
  SvgMineAct,
} from './components/svg';

const BottomTabs = createBottomTabNavigator();

const tabObjs: Record<string, any> = Object.freeze({
  Home: {
    text: 'cartoon',
    icon: <SvgHome />,
    iconAct: <SvgHomeAct />,
  },
  Category: {
    text: 'classify',
    icon: <SvgClassify />,
    iconAct: <SvgClassifyAct />,
  },
  Game: {
    text: 'recreation',
    icon: <SvgGame />,
    iconAct: <SvgGameAct />,
  },
  Bookshelf: {
    text: 'bookshelf',
    icon: <SvgShelf />,
    iconAct: <SvgShelfAct />,
  },
  Login: {
    text: 'registerMoney',
    icon: <SvgMine />,
    iconAct: <SvgMineAct />,
  },
});

const tabs = [
  {
    name: 'Home',
    component: Home,
  },
  {
    name: 'Category',
    component: Category,
  },
  {
    name: 'Game',
    component: Game,
  },
  {
    name: 'Bookshelf',
    component: Bookshelf,
  },
  {
    name: 'Login',
    component: Login,
  },
];

const LoginText = observer(({isActive}: any) => {
  const {userInfo} = useUserInfoStore();
  return (
    <ObserverText
      tKey={userInfo ? 'mine' : 'registerMoney'}
      type="tabbar"
      isActive={isActive}
    />
  );
});

const screenOptions = (props: any) => ({
  headerShown: false,
  tabBarLabel: (info: any) => {
    if (props.route.name === 'Login') {
      return <LoginText isActive={info.focused} />;
    }
    return (
      <ObserverText
        tKey={tabObjs[props.route.tKey || props.route.name].text}
        type="tabbar"
        isActive={info.focused}
      />
    );
  },
  tabBarIcon: (info: any) => {
    return info.focused
      ? tabObjs[props.route.tKey || props.route.name].iconAct
      : tabObjs[props.route.tKey || props.route.name].icon;
  },
});

function TabBar() {
  return (
    <BottomTabs.Navigator screenOptions={screenOptions}>
      {tabs.map(route => (
        <BottomTabs.Screen key={route.name} {...route} />
      ))}
    </BottomTabs.Navigator>
  );
}

export default TabBar;
